<template>
  <div class="app-container">
    <div class="controlname">号志灯控制</div>
    <el-table :data="lightControl" border :row-style="{ height: '100px' }">
      <el-table-column prop="name" width="120" align="center"> </el-table-column>
      <el-table-column prop="trackName" label="当前状态" min-width="200" align="center">
        <template slot-scope="scope">
          <div v-if="scope.row.stateOne">
            <img src="../../assets/images/1.png" alt="" />
          </div>
          <div v-else>
            <img src="../../assets/images/2.png" alt="" />
          </div>
        </template>
      </el-table-column>
      <el-table-column prop="trackName" label="1列位" min-width="200" align="center">
        <template slot-scope="scope">
          <div v-if="scope.row.stateOne">
            <img
              src="../../assets/images/3.png"
              alt=""
              @click="changestatus(scope.row.stateOne, scope.$index, 'stateOne')"
            />
          </div>
          <div v-else>
            <img
              src="../../assets/images/4.png"
              alt=""
              @click="changestatus(scope.row.stateOne, scope.$index, 'stateOne')"
            />
          </div>
        </template>
      </el-table-column>
      <el-table-column prop="trackName" label="当前状态" min-width="200" align="center">
        <template slot-scope="scope">
          <div v-if="scope.row.stateTwo">
            <img src="../../assets/images/1.png" alt="" />
          </div>
          <div v-else>
            <img src="../../assets/images/2.png" alt="" />
          </div>
        </template>
      </el-table-column>
      <el-table-column prop="trackName" label="2列位" min-width="200" align="center">
        <template slot-scope="scope">
          <div v-if="scope.row.stateTwo">
            <img
              src="../../assets/images/3.png"
              alt=""
              @click="changestatus(scope.row.stateOne, scope.$index, 'stateTwo')"
            />
          </div>
          <div v-else>
            <img
              src="../../assets/images/4.png"
              alt=""
              @click="changestatus(scope.row.stateOne, scope.$index, 'stateTwo')"
            />
          </div>
        </template>
      </el-table-column>
    </el-table>
  </div>
</template>
<script>
import { getDicts } from "@/api/system/dict/data";
import axios from "axios";
export default {
  data() {
    return {
      timer: null,
      mainIp: "",
      oneIp: "",
      twoIp: "",
      lightControl: [
        {
          name: "检11",
          stateOne: false,
          stateTwo: false,
        },
        {
          name: "检12",
          stateOne: false,
          stateTwo: false,
        },
        {
          name: "检13",
          stateOne: false,
          stateTwo: false,
        },
        {
          name: "检14",
          stateOne: false,
          stateTwo: false,
        },
      ],
    };
  },
  watch: {
    $route: {
      handler(val, oldval) {
        if (val.fullPath == "/SignalLightControl") {
          this.getplc_server_ip();
        }
      },
      deep: true,
      immediate: true,
    },
  },
  created() {
    this.getplc_1_ip();
    this.getplc_2_ip();
    this.settimedata();
  },
  destroyed() {
    clearInterval(this.timer);
    this.timer = null;
  },
  methods: {
    changestatus(states, index, flag) {
      this.$confirm("此操作将修改当前状态, 是否继续?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(() => {
          if (flag == "stateOne") {
            this.lightControl[index].stateOne = this.lightControl[index].stateOne ? false : true;
            let putData = [...this.lightControl];
            putData.forEach((item) => {
              if (item.stateOne) {
                item.stateOne = 1;
              } else {
                item.stateOne = 0;
              }
            });
            axios
              .post(
                `${this.mainIp}/plc?ip=${this.oneIp}&0=${putData[0].stateOne}&1=${putData[1].stateOne}&2=${putData[2].stateOne}&3=${putData[3].stateOne}`
              )
              .then((res) => {
                if (res.message == "ok") {
                  this.$message({
                    type: "success",
                    message: "修改成功!",
                  });
                  this.getplc_1_ip();
                  this.getplc_2_ip();
                }
              });
          } else {
            this.lightControl[index].stateTwo = this.lightControl[index].stateTwo ? false : true;
            let putData = [...this.lightControl];
            putData.forEach((item) => {
              if (item.stateTwo) {
                item.stateTwo = 1;
              } else {
                item.stateTwo = 0;
              }
            });
            axios
              .post(
                `${this.mainIp}/plc?ip=${this.twoIp}&0=${putData[0].stateTwo}&1=${putData[1].stateTwo}&2=${putData[2].stateTwo}&3=${putData[3].stateTwo}`
              )
              .then((res) => {
                console.log(res);
                if (res.message == "ok") {
                  this.$message({
                    type: "success",
                    message: "修改成功!",
                  });
                  this.getplc_1_ip();
                  this.getplc_2_ip();
                }
              });
          }
        })
        .catch(() => {
          // this.$message({
          //   type: "info",
          //   message: "已取消修改",
          // });
        });
    },
    settimedata() {
      this.timer = setInterval(() => {
        this.getplc_server_ip();
        this.getplc_1_ip();
        this.getplc_2_ip();
      }, 1000 * 10);
    },
    getplc_server_ip() {
      getDicts("plc_server_ip").then((response) => {
        this.mainIp = response.data[0].dictValue
        // sessionStorage.setItem("dictData", response.data[0].dictValue);
      });
    },
    getplc_1_ip() {
      getDicts("plc_1_ip").then((response) => {
        this.oneIp = response.data[0].dictValue;
        if (this.mainIp && this.oneIp) {
          axios
            .get(`${this.mainIp}/plc`, {
              params: {
                ip: this.oneIp,
              },
            })
            .then((res) => {
              let datas = res.data.values;
              this.lightControl[0].stateOne = datas[0];
              this.lightControl[1].stateOne = datas[1];
              this.lightControl[2].stateOne = datas[2];
              this.lightControl[3].stateOne = datas[3];
            });
        }
      });
    },
    getplc_2_ip() {
      getDicts("plc_2_ip").then((response) => {
        this.twoIp = response.data[0].dictValue;
        if (this.mainIp && this.twoIp) {
          axios
            .get(`${this.mainIp}/plc`, {
              params: {
                ip: this.twoIp,
              },
            })
            .then((res) => {
              let datas = res.data.values;
              this.lightControl[0].stateTwo = datas[0];
              this.lightControl[1].stateTwo = datas[1];
              this.lightControl[2].stateTwo = datas[2];
              this.lightControl[3].stateTwo = datas[3];
            });
        }
      });
    },
  },
};
</script>
<style lang="scss" scoped>
.controlname {
  width: 100px;
  font-size: 18px;
  font-weight: bold;
  margin: 10px auto;
}
</style>
